import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {Icon,Carousel,Divider,Comment,Avatar} from 'antd';
import roomImg from '../../image/room.jpg'
import './roomBody.css';
class RoomIndex extends Component {
    render() {
        return (
            <div className="roomIndex">
                <div className="roomShowTop">
                    <Link to="/app/home/index" style={{color:'#555'}}>
                        <Icon type="left" style={{fontSize:'30px',float:'left'}}/>
                    </Link>
                    房子详情
                </div>
                <div className="roomShowElse">
                    <Carousel autoplay className="carousel">
                        <img src={roomImg} alt="房子图片"/>
                        <img src={roomImg} alt="房子图片"/>
                        <img src={roomImg} alt="房子图片"/>
                        <img src={roomImg} alt="房子图片"/>
                    </Carousel>
                    <div className="roomShowText">
                        <p className="theInfoRoomShow">10万/平方米</p>
                        <p>此房子非常好！</p>
                        {/*theInfo的样式在roomDetail.css文件中*/}
                        <p><span className="theInfo">房屋类型：</span><span>两室一厅</span></p>
                        <p><span className="theInfo">详细地址：</span><span>贵港市庆丰镇潘岭村</span></p>
                    </div>
                </div>
                <UserAction />
                <div className="userSay">
                    <p><span className="userSaySpan">房子评价：</span><span className="userSayMore">查看更多 <Icon type="right" /></span></p>
                    <Comment
                        author={<span>维邦</span>}
                        avatar={(
                            <Avatar
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                alt="Han Solo"
                            />
                        )}
                        content={(
                            <p style={{textAlign:'left'}}>房子很不错，和图片描述的一样，我进去体验过，房子大，两室一厅，独卫，环境舒适。周边的环境也很不错，买菜方便。</p>
                        )}
                        datetime={(
                                <span>2019-01-01 11:20</span>
                        )}
                    />
                </div>
                <Divider orientation="left">周边环境</Divider>
                <div className="environmentImg">
                    <div className="row">
                        <div className="rowinner">
                            <img src={roomImg} alt="周边环境"/>
                            <span>周边环境</span>
                        </div>
                        <div className="rowinner">
                            <img src={roomImg} alt="周边环境"/>
                            <span>周边环境</span>
                        </div>
                    </div>
                    <div className="row">
                        <div className="rowinner">
                            <img src={roomImg} alt="周边环境"/>
                            <span>周边环境</span>
                        </div>
                        <div className="rowinner">
                            <img src={roomImg} alt="周边环境"/>
                            <span>周边环境</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

/**
 * 用户操作组件
 */
class UserAction extends Component {
    render() {
        return (
            <div className="userAction">
                <div className="userActionInner">
                    <Icon type="heart"/>
                    <span>喜欢</span>
                </div>
                <div className="userActionInner">
                    <Icon type="environment"/>
                    <span>地图</span>
                </div>
                <div className="userActionInner">
                    <Icon type="share-alt"/>
                    <span>分享</span>
                </div>
                <div className="userActionInner">
                    <Icon type="customer-service" />
                    <span>询问</span>
                </div>
            </div>
        )}
}

export default RoomIndex;
